<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>火山 SDK 调用</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    <header>
      <h1>火山 SDK 调用</h1>
      <nav class="nav">
        <!-- 导航菜单 - 包含各类功能入口链接 -->
        <!-- 火山SDK调用入口：点击跳转到/ark页面，当active_nav为'ark'时添加active类（用于高亮当前页） -->
        <a href="/ark" class="{{ 'active' if (active_nav or '') == 'ark' else '' }}">火山SDK调用</a>

        <!-- 中转平台调用入口：点击跳转到首页（/），当active_nav为'proxy'时添加active类 -->
        <!-- 注：中转平台通常用于处理不同服务间的请求转发、协议转换或数据适配 -->
        <!-- <a href="/" class="{{ 'active' if (active_nav or '') == 'proxy' else '' }}">中转平台调用</a> -->

        <!-- 图片库入口：点击跳转到/images页面，当active_nav为'images'时添加active类 -->
        <!-- 用于展示、管理项目中用到的各类图片资源 -->
        <a href="/images" class="{{ 'active' if (active_nav or '') == 'images' else '' }}">图片库</a>

        <!-- 文件管理入口：点击跳转到/files页面，当active_nav为'files'时添加active类 -->
        <!-- 用于上传、下载、查看项目相关的文件（如文档、配置文件等） -->
        <!-- <!-<a href="/files" class="{{ 'active' if (active_nav or '') == 'files' else '' }}">文件</a>-> -->
      </nav>
      <p class="sub">通过火山引擎 Ark SDK 调用模型生图 · <a href="/images">图片库</a></p>
    </header>

    <main>
      <section class="panel">
        <form action="/ark" method="post" class="form">
          <div class="row">
            <label for="ark_model">模型</label>
            <select id="ark_model" name="ark_model">
              <option value="doubao-seedream-4-0-250828" {% if (ark_model_value or '') == 'doubao-seedream-4-0-250828' %}selected{% endif %}>Doubao Ark · seedream-4-0-250828</option>
            </select>
          </div>
          <label for="prompt">提示词</label>
          <textarea id="prompt" name="prompt" rows="4" placeholder="例如：一只鹿在湖边饮水..." required>{{ prompt_value or '' }}</textarea>

          <div class="row">
            <label for="ratio">纵横比</label>
            <select id="ratio" name="ratio">
              <option value="16:9" {% if (ratio_value or '') == '16:9' %}selected{% endif %}>16:9（横图）</option>
              <option value="9:16" {% if (ratio_value or '') == '9:16' %}selected{% endif %}>9:16（竖图）</option>
              <option value="1:1" {% if (ratio_value or '') == '1:1' %}selected{% endif %}>1:1（方图）</option>
              <option value="3:4" {% if (ratio_value or '') == '3:4' %}selected{% endif %}>3:4</option>
              <option value="4:3" {% if (ratio_value or '') == '4:3' %}selected{% endif %}>4:3</option>
            </select>
          </div>

          <div class="row">
            <label for="resolution">分辨率</label>
            <select id="resolution" name="resolution">
              <option value="2K" {% if (resolution_value or '') == '2K' %}selected{% endif %}>2K（默认）</option>
              <option value="4K" {% if (resolution_value or '') == '4K' %}selected{% endif %}>4K</option>
            </select>
          </div>

          <div class="row">
            <label for="n">数量</label>
            <input id="n" name="n" type="number" min="1" max="6" step="1" value="{{ n_value or 1 }}" />
          </div>

          <button type="submit">生成图片</button>
        </form>
        {% if error %}
        <div class="error">{{ error }}</div>
        {% endif %}
      </section>

      {% if images and images|length > 0 %}
      <section class="panel">
        <h2>生成结果</h2>
        <div class="grid">
          {% for url in images %}
          <figure class="card">
            <img src="{{ url }}" alt="生成图片" loading="lazy" />
            <figcaption>{{ url }}</figcaption>
          </figure>
          {% endfor %}
        </div>
      </section>
      {% endif %}
    </main>

    <footer>
      <small>后端: FastAPI · 模版: Jinja2</small>
    </footer>

    <div id="lightbox" class="lightbox" aria-hidden="true">
      <button class="lb-close" aria-label="关闭">×</button>
      <img src="" alt="预览图" />
    </div>
    <script src="/static/lightbox.js"></script>
  </body>
  </html>
